import styled from 'styled-components'

export const HeaderWrapper = styled.div`
  //display: flex;
  //align-items: center;
  //justify-content: space-between;
  //height: 80px;
  //border-bottom: 1px solid #eee;
  &.fixed{
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
  }
  .content{
    //background: #fff;
    position: relative;
    z-index: 19;
    //background: ${props=>props.isAlpha ? 'rgba(255,255,255,0)':'#fff'};
    background: ${props=>props.theme.isAlpha ? 'rgba(255,255,255,0)':'#fff'};
    border-bottom:1px solid #eee ;
    border-bottom-color: ${props=>props.theme.isAlpha ? 'rgba(233,233,233,0)':'#fff'};
    
    
    .top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
    }
    //.search-area{
    //  height: 100px;
    //}
  }
  .cover{
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
  }
  
  
`

export const SearchAreaWrapper =styled.div`
  transition: height 0.25s ease;
  height: ${props => props.isSearch ?'100px':0};
  //background: red;
`
